<script setup>
import { ref, reactive, onMounted } from "vue";
import Top from "../nav/index.vue";
// import Aside from "../postBar/index.vue";
import Bottom from "../public/bottom/index.vue";
import Swiper from "../homeSwiper/index.vue";
import { takeROrGPosts } from "../../api/posts/index.js"
import { Avatar, ArrowDown } from "@element-plus/icons-vue";

const obj = reactive({ data: {} })
const getPost = async () => {
    const { data: { data: data } } = await takeROrGPosts({ isfocus_on: "推荐" })
    obj.data = data
    console.log(obj.data)
}
onMounted(() => {
    getPost()
})

let btncolor = ref("wite");
let btnmsg = ref("+ 关注");
let btnhcolor = ref("bisque");
let flag = true;
let change = () => {
    flag = !flag;
    if (flag) {
        btncolor.value = "wite";
        btnmsg.value = "+ 关注";
        btnhcolor.value = "bisque";
    } else {
        btncolor.value = "wite";
        btnmsg.value = "已关注";
        btnhcolor.value = "wite";
    }
};

let a = ref("green")
let b = ref("pink")
let msg1 = ref("推荐")
let msg2 = ref("关注")
let n1 = true
let n2 = false
function change1() {
    a.value = "green"
    b.value = "pink"
}
function change2() {
    b.value = "green"
    a.value = "pink"
}

</script>
<template>
    <Top></Top>
    <!-- <Aside></Aside> -->
    <!-- 轮播图部分 -->
    <Swiper></Swiper>

    <div class="middle">
        <!-- 点击切换
        <div class="change">
          <div class="baoguo">
            <div class="tuijian" @click="change1" :style="{color:a}">
              <span
                ><el-icon class="icon" @click="change1" :style="{color:a}"><Avatar /></el-icon>{{msg1}}</span
              >
            </div>
            <div class="shuxian">
              <span>|</span>
            </div>
            <div class="guanzhu"  @click="change2" :style="{color:b}">
              <span
                ><el-icon class="icon"   @click="change2" :style="{color:b}"><Avatar /></el-icon>{{msg2}}</span
              >
            </div>
          </div>
        </div> -->
        <!-- 种类分类 -->
        <div class="kind">

            <div class="leftbox">
                <a href="">
                    <svg t="1665069208339" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4697" width="70" height="40"><path d="M441.152 642.56l-18.1376-18.0736 330.7008-331.8016a69.312 69.312 0 0 0 0-97.664l-1.152-1.152a68.1984 68.1984 0 0 0-48.6272-20.224 68.16 68.16 0 0 0-48.6016 20.2112l-39.424 39.552-18.1376-18.0736 39.424-39.552a93.6192 93.6192 0 0 1 66.7392-27.7376c25.216 0 48.9216 9.856 66.7392 27.7376l1.152 1.152c36.7744 36.9024 36.7744 96.9344 0.0128 133.824L441.152 642.56z" fill="" p-id="4698"></path><path d="M578.3936 234.7904l18.1248 18.0864-19.4176 19.456-18.1248-18.0736zM393.2544 768c-0.0128 0-0.0128 0 0 0a140.8 140.8 0 0 1-100.3904-41.7152l-1.8432-1.856c-55.3216-55.5008-55.3216-145.8176 0-201.3184l248.512-249.344 18.1376 18.0736-248.512 249.344c-45.3888 45.5296-45.3888 119.6288 0 165.1712l1.8432 1.856C332.9664 730.2528 362.176 742.4 393.2416 742.4s60.2752-12.1344 82.2656-34.1888l112.5632-112.96 18.1376 18.0736-112.576 112.96A140.7872 140.7872 0 0 1 393.2544 768zM626.944 556.288l18.1376 18.0736-19.4304 19.4816-18.1248-18.0736z" fill="" p-id="4699"></path><path d="M149.8624 564.6208l-18.1376-18.0736L569.92 106.8928A188.0064 188.0064 0 0 1 703.9616 51.2c50.624 0 98.2272 19.776 134.0288 55.6928l2.5344 2.5472c73.8688 74.112 73.8688 194.7008 0 268.8128L664.4736 554.88l-18.1376-18.0736L822.3616 360.192c63.9488-64.1536 63.9488-168.5248 0-232.6784l-2.5216-2.5472A162.4832 162.4832 0 0 0 703.9616 76.8c-43.776 0-84.9408 17.1008-115.8912 48.1664L149.8624 564.6208z" fill="" p-id="4700"></path></svg>
                    <span>电脑</span>
                </a>
                <a href="">
                    <svg t="1665069208339" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4697" width="70" height="40"><path d="M441.152 642.56l-18.1376-18.0736 330.7008-331.8016a69.312 69.312 0 0 0 0-97.664l-1.152-1.152a68.1984 68.1984 0 0 0-48.6272-20.224 68.16 68.16 0 0 0-48.6016 20.2112l-39.424 39.552-18.1376-18.0736 39.424-39.552a93.6192 93.6192 0 0 1 66.7392-27.7376c25.216 0 48.9216 9.856 66.7392 27.7376l1.152 1.152c36.7744 36.9024 36.7744 96.9344 0.0128 133.824L441.152 642.56z" fill="" p-id="4698"></path><path d="M578.3936 234.7904l18.1248 18.0864-19.4176 19.456-18.1248-18.0736zM393.2544 768c-0.0128 0-0.0128 0 0 0a140.8 140.8 0 0 1-100.3904-41.7152l-1.8432-1.856c-55.3216-55.5008-55.3216-145.8176 0-201.3184l248.512-249.344 18.1376 18.0736-248.512 249.344c-45.3888 45.5296-45.3888 119.6288 0 165.1712l1.8432 1.856C332.9664 730.2528 362.176 742.4 393.2416 742.4s60.2752-12.1344 82.2656-34.1888l112.5632-112.96 18.1376 18.0736-112.576 112.96A140.7872 140.7872 0 0 1 393.2544 768zM626.944 556.288l18.1376 18.0736-19.4304 19.4816-18.1248-18.0736z" fill="" p-id="4699"></path><path d="M149.8624 564.6208l-18.1376-18.0736L569.92 106.8928A188.0064 188.0064 0 0 1 703.9616 51.2c50.624 0 98.2272 19.776 134.0288 55.6928l2.5344 2.5472c73.8688 74.112 73.8688 194.7008 0 268.8128L664.4736 554.88l-18.1376-18.0736L822.3616 360.192c63.9488-64.1536 63.9488-168.5248 0-232.6784l-2.5216-2.5472A162.4832 162.4832 0 0 0 703.9616 76.8c-43.776 0-84.9408 17.1008-115.8912 48.1664L149.8624 564.6208z" fill="" p-id="4700"></path></svg>
                    <span>手机</span>
                </a>
                <a href="">
                    <svg t="1665069208339" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4697" width="70" height="40"><path d="M441.152 642.56l-18.1376-18.0736 330.7008-331.8016a69.312 69.312 0 0 0 0-97.664l-1.152-1.152a68.1984 68.1984 0 0 0-48.6272-20.224 68.16 68.16 0 0 0-48.6016 20.2112l-39.424 39.552-18.1376-18.0736 39.424-39.552a93.6192 93.6192 0 0 1 66.7392-27.7376c25.216 0 48.9216 9.856 66.7392 27.7376l1.152 1.152c36.7744 36.9024 36.7744 96.9344 0.0128 133.824L441.152 642.56z" fill="" p-id="4698"></path><path d="M578.3936 234.7904l18.1248 18.0864-19.4176 19.456-18.1248-18.0736zM393.2544 768c-0.0128 0-0.0128 0 0 0a140.8 140.8 0 0 1-100.3904-41.7152l-1.8432-1.856c-55.3216-55.5008-55.3216-145.8176 0-201.3184l248.512-249.344 18.1376 18.0736-248.512 249.344c-45.3888 45.5296-45.3888 119.6288 0 165.1712l1.8432 1.856C332.9664 730.2528 362.176 742.4 393.2416 742.4s60.2752-12.1344 82.2656-34.1888l112.5632-112.96 18.1376 18.0736-112.576 112.96A140.7872 140.7872 0 0 1 393.2544 768zM626.944 556.288l18.1376 18.0736-19.4304 19.4816-18.1248-18.0736z" fill="" p-id="4699"></path><path d="M149.8624 564.6208l-18.1376-18.0736L569.92 106.8928A188.0064 188.0064 0 0 1 703.9616 51.2c50.624 0 98.2272 19.776 134.0288 55.6928l2.5344 2.5472c73.8688 74.112 73.8688 194.7008 0 268.8128L664.4736 554.88l-18.1376-18.0736L822.3616 360.192c63.9488-64.1536 63.9488-168.5248 0-232.6784l-2.5216-2.5472A162.4832 162.4832 0 0 0 703.9616 76.8c-43.776 0-84.9408 17.1008-115.8912 48.1664L149.8624 564.6208z" fill="" p-id="4700"></path></svg>
                    <span>平板</span>
                </a>
                <a href="">
                    <svg t="1665069208339" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4697" width="70" height="40"><path d="M441.152 642.56l-18.1376-18.0736 330.7008-331.8016a69.312 69.312 0 0 0 0-97.664l-1.152-1.152a68.1984 68.1984 0 0 0-48.6272-20.224 68.16 68.16 0 0 0-48.6016 20.2112l-39.424 39.552-18.1376-18.0736 39.424-39.552a93.6192 93.6192 0 0 1 66.7392-27.7376c25.216 0 48.9216 9.856 66.7392 27.7376l1.152 1.152c36.7744 36.9024 36.7744 96.9344 0.0128 133.824L441.152 642.56z" fill="" p-id="4698"></path><path d="M578.3936 234.7904l18.1248 18.0864-19.4176 19.456-18.1248-18.0736zM393.2544 768c-0.0128 0-0.0128 0 0 0a140.8 140.8 0 0 1-100.3904-41.7152l-1.8432-1.856c-55.3216-55.5008-55.3216-145.8176 0-201.3184l248.512-249.344 18.1376 18.0736-248.512 249.344c-45.3888 45.5296-45.3888 119.6288 0 165.1712l1.8432 1.856C332.9664 730.2528 362.176 742.4 393.2416 742.4s60.2752-12.1344 82.2656-34.1888l112.5632-112.96 18.1376 18.0736-112.576 112.96A140.7872 140.7872 0 0 1 393.2544 768zM626.944 556.288l18.1376 18.0736-19.4304 19.4816-18.1248-18.0736z" fill="" p-id="4699"></path><path d="M149.8624 564.6208l-18.1376-18.0736L569.92 106.8928A188.0064 188.0064 0 0 1 703.9616 51.2c50.624 0 98.2272 19.776 134.0288 55.6928l2.5344 2.5472c73.8688 74.112 73.8688 194.7008 0 268.8128L664.4736 554.88l-18.1376-18.0736L822.3616 360.192c63.9488-64.1536 63.9488-168.5248 0-232.6784l-2.5216-2.5472A162.4832 162.4832 0 0 0 703.9616 76.8c-43.776 0-84.9408 17.1008-115.8912 48.1664L149.8624 564.6208z" fill="" p-id="4700"></path></svg>
                    <span>耳机</span>
                </a>
            </div>
           <div class="rightbox">
            <a href="">
                <svg t="1665070603065" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6400" width="32" height="32"><path d="M148.6 661C66.7 661 0 594.4 0 512.4s66.7-148.6 148.6-148.6 148.6 66.7 148.6 148.6S230.6 661 148.6 661z m0-264.2C84.9 396.8 33 448.6 33 512.4S84.9 628 148.6 628s115.6-51.9 115.6-115.6-51.8-115.6-115.6-115.6zM512 661c-82 0-148.6-66.7-148.6-148.6S430 363.7 512 363.7s148.6 66.7 148.6 148.6S594 661 512 661z m0-264.2c-63.7 0-115.6 51.9-115.6 115.6S448.3 628 512 628s115.6-51.9 115.6-115.6S575.7 396.8 512 396.8zM875.4 661c-82 0-148.6-66.7-148.6-148.6s66.7-148.6 148.6-148.6S1024 430.4 1024 512.4c0 16-2.5 31.8-7.5 46.8-2.9 8.6-12.2 13.3-20.9 10.5-8.6-2.9-13.3-12.2-10.5-20.9 3.9-11.7 5.8-23.9 5.8-36.4 0-63.7-51.9-115.6-115.6-115.6s-115.6 51.9-115.6 115.6S811.6 628 875.4 628c25.8 0 50.2-8.3 70.6-24.1 7.2-5.6 17.6-4.2 23.2 3 5.6 7.2 4.3 17.6-3 23.2-26.2 20.2-57.7 30.9-90.8 30.9z" fill="" p-id="6401"></path></svg>
                    <span>查看更多</span>
                </a>
           </div>
        </div>

        <!--推荐的页面样式  -->
        <div class="page1">
            <!-- 头部作者信息 头像 发布时间 等 -->
            <div class="head">
                <div class="tximg">
                    <img src="./imgs/img1.JPG" alt="" />
                </div>
                <div class="publicinfm">
                    <p class="name">我是帅比</p>
                    <p class="time">发布时间</p>
                </div>
                <div class="follow">
                    <button class="gzbtn" @click="change">{{ btnmsg }}</button>
                </div>
            </div>
            <div class="henxian">
                <el-divider></el-divider>
            </div>
            <!-- 发布内容 -->
            <div class="body">
                <div class="fabutext">
                    <p>
                        当地时间9月26日，彭博社报道称，苹果将在印度组装最新的iPhone
                        14，此时距苹果发布新款iPhone才过去不到三周，这将是苹果首次在新款iPhone发布的第一年就开始在印度制造。印度是仅次于中国的全球第二大智能手机市场，此前印度生产新款iPhone的时间通常比中国滞后6至9个月。
                        据科技媒体TechCrunch，苹果合作制造商富士康正在印度清奈（Chennai）附近的Sriperumbudur工厂生iPhone14，预计今年稍晚就会在当地开售。苹果在一封电子邮件声明中表示，“我们很高兴能够在印度生产
                        iPhone
                        14。”彭博社此前援引据知情人士消息，称苹果一直在与供应商合作，以提高在印度的生产能力，缩小印度和中国生产新iPhone的时间差。iPhone的主要制造商富士康已经研究了如何从中国将零部件发货至印度，并在印度清奈附近的工厂组装iPhone
                        14。
                    </p>
                    <!-- <a href="">[展开全文]</a> -->
                </div>
                <div class="fabuimg">
                    <div class="publicimg">
                        <img src="./imgs/img2.png" alt="" />
                        <img src="./imgs/img2.png" alt="" />
                        <img src="./imgs/img2.png" alt="" />
                    </div>
                    <div class="publicimg">
                        <img src="./imgs/img2.png" alt="" />
                    </div>
                </div>

                <!-- 点赞 评论 -->
                <div class="foot">
                    <div class="dianzan">
                        <svg t="1664437226777" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="2597" width="20" height="20">
                            <path
                                d="M939.358251 423.424662c-23.01825-37.252439-62.924121-60.779272-107.019409-63.209624-2.755764-0.38681-5.510504-0.579191-8.347109-0.579191l-152.202471-0.121773c6.649444-28.975938 10.015098-58.653865 10.015098-88.657202 0-28.223808-3.213181-57.139372-9.556657-85.952604-0.447185-2.043542-1.098008-4.006244-1.932002-5.866614-15.820314-57.302077-67.37755-96.841605-127.282918-96.841605-72.827679 0-132.081201 59.254545-132.081201 132.081201 0 3.334955 0.132006 6.66991 0.406253 10.015098-2.196015 57.211003-32.108279 109.947088-80.269162 141.363611-14.447037 9.42465-18.524912 28.773324-9.099239 43.220361 9.414417 14.437827 28.752858 18.535145 43.220361 9.099239 65.811892-42.925648 106.429984-115.325585 108.656699-193.684234 0.030699-1.332345-0.010233-2.663666-0.14224-3.996011-0.203638-2.012843-0.304945-4.016477-0.304945-6.019087 0-38.381146 31.233352-69.614497 69.614497-69.614497 32.57593 0 60.474326 22.204721 67.824735 53.997821 0.356111 1.534959 0.823761 3.019777 1.402953 4.453429 4.696975 22.814612 7.076162 45.579081 7.076162 67.743894 0 37.485753-6.222725 74.352405-18.494213 109.592001-3.324722 9.546424-1.819438 20.111037 4.02671 28.345582 5.856381 8.245801 15.332197 13.146415 25.448602 13.156648l193.226816 0.101307c1.423419 0.264013 2.857071 0.426719 4.300956 0.477884 24.116257 0.9967 45.935192 13.614066 58.603723 34.090423 7.838525 12.31242 11.438517 26.800389 10.431583 41.939181-0.080841 0.945535-0.121773 1.911536-0.11154 2.877537 0 0.854461 0.040932 1.697665 0.11154 2.53166 0.010233 0.335644-0.030699 0.661056-0.11154 0.976234-0.101307 0.376577-0.193405 0.772596-0.284479 1.159406l-74.972529 330.391802c-0.914836 1.281179-1.738597 2.6432-2.449795 4.046153-5.937223 11.762905-14.660908 21.48329-25.346271 28.172643-10.746762 6.812149-23.059182 10.614755-35.757388 11.06194-0.854461-0.061398-513.766226-0.224104-513.766226-0.224104-0.467651-0.020466-0.935302-0.030699-1.402953-0.030699 0 0-111.01542 0.172939-112.718201 0.457418-1.932002 0-3.446495-1.50426-3.446495-3.415796l0.299829-416.334173c0-1.901303 1.545192-3.446495 3.01466-3.456728l1.245364 0.121773c1.174756 0.132006 2.653433 0.284479 3.52836 0.193405l83.82822-0.222057 0 339.367221c0 17.253966 13.979386 31.233352 31.233352 31.233352s31.233352-13.979386 31.233352-31.233352L281.009092 435.350273c0-1.778506 0-8.631588 0-10.411117 0-17.253966-13.979386-30.928407-31.233352-30.928407-1.50426 0-117.547183 0.304945-119.402437 0.304945-36.34272 0-65.913199 29.566386-65.913199 65.893756l-0.299829 416.334173c0 36.337603 29.571503 65.902966 65.913199 65.902966 2.541893 0 111.406323-0.457418 111.406323-0.457418 0.457418 0.020466 0.925069 0.030699 1.382487 0.030699 0 0 511.458671 0.274246 512.505513 0.274246 25.469068 0 50.296523-7.197936 71.647807-20.73116 19.612687-12.281721 35.777855-29.881564 46.839795-50.967812 3.660366-5.622044 6.435573-11.875468 8.256034-18.615986 0.11154-0.416486 0.213871-0.823761 0.304945-1.240247l74.881454-330.340637c1.596358-6.212492 2.257413-12.586666 2.00261-18.992563C960.892707 473.366098 953.948551 446.331371 939.358251 423.424662z"
                                p-id="2598"></path>
                            <path
                                d="M450.027553 518.650467c-17.253966 0-31.233352 13.979386-31.233352 31.233352l0 30.470989c0 17.253966 13.979386 31.233352 31.233352 31.233352 17.253966 0 31.233352-13.979386 31.233352-31.233352l0-30.470989C481.260905 532.629853 467.281519 518.650467 450.027553 518.650467z"
                                p-id="2599"></path>
                            <path
                                d="M693.805696 518.650467c-17.253966 0-31.233352 13.979386-31.233352 31.233352l0 30.470989c0 17.253966 13.979386 31.233352 31.233352 31.233352 17.253966 0 31.233352-13.979386 31.233352-31.233352l0-30.470989C725.039048 532.629853 711.058638 518.650467 693.805696 518.650467z"
                                p-id="2600"></path>
                            <path
                                d="M648.940882 660.09492c-14.304797-9.393951-33.592073-5.398964-43.159986 8.763594-0.132006 0.193405-13.614066 19.754926-34.171264 19.754926-19.98824 0-32.423457-18.09717-33.266661-19.368116-9.17087-14.427594-28.254507-18.809391-42.834574-9.770528-14.650675 9.109472-19.155269 28.366048-10.055007 43.016723 11.214413 18.047028 41.96988 48.588625 86.156242 48.588625 43.962258 0 75.104535-30.318516 86.572728-48.222281C667.404396 688.461991 663.216004 669.500127 648.940882 660.09492z"
                                p-id="2601"></path>
                        </svg>
                        <span>点赞条数</span>
                    </div>
                    <div class="pinglun">
                        <svg t="1664438866122" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="3550" width="20" height="20">
                            <path
                                d="M157.568 751.296c-11.008-18.688-18.218667-31.221333-21.802667-37.909333A424.885333 424.885333 0 0 1 85.333333 512C85.333333 276.362667 276.362667 85.333333 512 85.333333s426.666667 191.029333 426.666667 426.666667-191.029333 426.666667-426.666667 426.666667a424.778667 424.778667 0 0 1-219.125333-60.501334 2786.56 2786.56 0 0 0-20.053334-11.765333l-104.405333 28.48c-23.893333 6.506667-45.802667-15.413333-39.285333-39.296l28.437333-104.288z m65.301333 3.786667l-17.258666 63.306666 63.306666-17.258666a32 32 0 0 1 24.522667 3.210666 4515.84 4515.84 0 0 1 32.352 18.944A360.789333 360.789333 0 0 0 512 874.666667c200.298667 0 362.666667-162.368 362.666667-362.666667S712.298667 149.333333 512 149.333333 149.333333 311.701333 149.333333 512c0 60.586667 14.848 118.954667 42.826667 171.136 3.712 6.912 12.928 22.826667 27.370667 47.232a32 32 0 0 1 3.338666 24.714667z m145.994667-70.773334a32 32 0 1 1 40.917333-49.205333A159.189333 159.189333 0 0 0 512 672c37.888 0 73.674667-13.173333 102.186667-36.885333a32 32 0 0 1 40.917333 49.216A223.178667 223.178667 0 0 1 512 736a223.178667 223.178667 0 0 1-143.136-51.690667z"
                                p-id="3551"></path>
                        </svg>
                        <span>评论条数</span>
                    </div>
                    <div class="shoucang">
                        <svg t="1664524497598" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="3540" width="20" height="20">
                            <path
                                d="M616.9 281.1c-4 2-8.3 3-12.7 3-11 0-20.9-6.1-25.8-16l-66.2-134.2-79.1 160.2c-4.3 8.5-12.3 14.4-21.6 15.7l-176.8 25.7 127.9 114.7c6.8 6.7 9.8 16.2 8.3 25.4l-5.5 32.1c-2.4 13.8-14.3 23.8-28.3 23.8-17.8 0-31.3-16-28.3-33.5l3-17.3-122.7-109.5c-14.7-14.4-19.9-35.5-13.5-55 6.4-19.6 23-33.5 43.3-36.4l169.5-24.6 75.8-153.6c9.1-18.4 27.6-29.9 48.1-29.9 20.6 0 39 11.5 48.1 29.9L630 242.7c6.9 14.1 1.1 31.3-13.1 38.4zM575.5 598.5c-7.7 13.4-24.6 18.2-38.3 11.1l-25.1-13.2-23.1 12.2c-13.7 7.2-30.5 2.3-38.3-11.1-8.2-14.1-2.9-32.2 11.5-39.8l6-3.2 30.6-16.1c4.1-2.1 8.7-3.3 13.4-3.3 4.7 0 9.3 1.2 13.4 3.3l30.6 16.1 7.9 4.1c14.4 7.7 19.6 25.8 11.4 39.9zM835.3 371.1L712.6 480.8l3 17.3c3 17.5-10.5 33.5-28.3 33.5-14 0-25.9-10.1-28.3-23.8l-5.5-32.2c-1.6-9.3 1.5-18.8 8.3-25.4l127.9-114.7-117.1-17c-15.6-2.2-26.6-16.8-24.3-32.5 2-14 14.2-24.6 28.4-24.6 1.4 0 2.8 0.1 4.1 0.3l124.8 18.1c20.3 3 36.9 16.9 43.3 36.4 6.3 19.5 1.1 40.6-13.6 54.9z"
                                fill="#2c2c2c" p-id="3541"></path>
                            <path
                                d="M888.4 541.4c-7.1-14.9-20.3-25.8-36.1-29.8-3.3-0.8-6.8-1.3-10.3-1.3-2 0-4.1 0.1-6.1 0.4l-2.8 0.4c-2.4 0.4-4.8 0.7-7.2 1.1-138 23-230.1 107.3-313.3 211.1-83.2-103.8-175.2-188.1-313.2-211.1-3-0.5-5.9-0.9-8.8-1.4l-1.2-0.2c-2.1-0.3-4.2-0.5-6.3-0.5-3.4 0-6.8 0.4-10.2 1.2-18.3 4.5-33.3 18.7-39.1 37-1.3 4.1-2 8.4-2 12.7v278.6c0 62.1 50.3 112.4 112.4 112.4H780c62.1 0 112.4-50.3 112.4-112.4V559.5c0.1-6.2-1.3-12.4-4-18.1zM775.7 900h-527c-35.6 0-64.5-28.9-64.5-64.5V563.4c0.2-0.1 0.3-0.2 0.4-0.4 2.2 0.3 4.3 0.6 6.2 1 129.7 21.6 213.9 103.4 289.9 203.7-2.6 4.3-7.8 12.9-18.4 30.7-2.4 4-3.6 8.6-3.6 13.2 0 12.9 9.6 23.9 22.4 25.7 1.2 0.2 2.3 0.2 3.5 0.2 9.1 0 17.6-4.9 22.3-12.7 1.9-3.2 3.9-6.6 5.7-9.7 6.8 11.8 14.4 26.3 21 39.3 5.9 11.7 19.7 17.1 32 12.7 14.7-5.3 21.4-22.2 14.4-36.2-10.4-20.8-21.9-42.4-31.5-57.3-0.1-0.2-0.3-0.5-0.4-0.6-1.3-1.9-2.4-3.7-3.5-5.4 75.9-100.2 160.1-182 289.7-203.6l6-0.9v272.5c-0.1 35.5-28.9 64.4-64.6 64.4z"
                                fill="#2c2c2c" p-id="3542"></path>
                        </svg>
                        <span>收藏条数</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="bottom">
        <div class="icon">
            <a href="">
                <el-icon>
                    <ArrowDown />
                </el-icon>
            </a>
        </div>
        <div class="more"><a href="">展开更多</a></div>
    </div>
    <!-- <Bottom></Bottom> -->
</template>
<style scoped lang="scss">
* {
    padding: 0;
    margin: 0;
    // background: whitesmoke;
}

.swiper {
    width: 80%;
    height: 115px;
    background-color: cornflowerblue;
    margin: 0 auto;
}

@media screen and (min-width: 1200px) {

    .kind {
        display: flex;
        flex-wrap:nowrap;
        justify-content:space-evenly;
        margin:0 auto;
        margin-top: 40px;
        // padding: 5px;
        .leftbox,.rightbox{
            a {
                text-decoration: none;
                span {
                    font-size: 24px;
                    vertical-align: middle;
                }
                .icon {
                width:70px;
                height:40px;
                vertical-align: middle;
                // margin-top: 4px;
            }

            }
           
        }
    }
    .page1 {
        width: 65%;
        margin: 0 auto;
        margin-top: 40px;
        background-color: whitesmoke;
        border-radius: 20px;

        // border-radius: 30px;
        // background-color: yellowgreen;
        .head {
            display: flex;
            width: 90%;
            margin: 0 auto;
            padding: 20px;
            // background-color: steelblue;
            position: relative;

            .tximg {
                width: 60px;
                height: 100%;
                border-radius: 50%;

                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }

            .publicinfm {
                margin-left: 20px;
                font-size: 15px;

                .time {
                    margin-top: 20px;
                    font-size: 5px;
                }
            }

            .follow {
                position: absolute;
                right: 110px;
                top: 25px;
                border-radius: 15%;
                border: none;
                outline: none;

                .gzbtn {
                    width: 70px;
                    height: 35px;
                    background-color: v-bind(btncolor);
                    border-radius: 30px;
                    border: 1px rgba(255, 115, 0, 0.724) solid;
                    outline: none;
                    color: rgba(255, 115, 0, 0.724);
                    font-size: 12px;
                    font-weight: 600;
                }

                .gzbtn:hover {
                    cursor: pointer;
                    background-color: v-bind(btnhcolor);
                }
            }
        }

        .henxian {
            width: 80%;
            margin: 20px auto;
        }

        .body {
            width: 91%;
            margin: 0 auto;
            padding: 10px;
            padding-left: 120px;

            .fabutext {
                width: 103%;

                // a{
                //   text-decoration: none;
                // }
                p {
                    width: 60%;
                    height: 20px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-family: "宋体";
                    white-space: nowrap;
                    // text-indent: 2em;
                    // line-height: 1.5em;
                    text-align: left;
                    // font-size: 25px;
                }
            }

            .fabuimg {
                width: 100%;
                margin-top: 5px;

                .publicimg {
                    width: 100%;
                    // background-color: crimson;
                    display: flex;
                    margin: 0 auto;
                    margin-top: 20px;
                    flex-wrap: wrap;
                    justify-content: flex-start;

                    img {
                        width: 150px;
                        height: 150px;
                        margin-right: 15px;
                        border-radius: 10px;
                    }
                }
            }
        }

        .foot {
            width: 90%;
            // background-color: cornflowerblue;
            // margin: 0 auto;
            margin-top: 30px;
            // display: flex;
            justify-content: space-around;

            .dianzan,
            .pinglun,
            .shoucang {
                // background-color: darkblue;
                display: inline-block;
                padding: 5px;
                margin-right: 70px;

                span {
                    vertical-align: middle;
                    font-size: 18px;
                }

                .icon {
                    vertical-align: middle;
                }
            }
        }
    }

    .bottom {
        width: 30%;
        // background-color: tomato;
        margin: 0 auto;
        margin-top: 15px;
        display: flex;
        justify-content: center;
        padding-top: 5px;

        a {
            text-decoration: none;
        }
    }
}

@media screen and (max-width: 1200px) {
    .kind {
        display: flex;
        flex-wrap:nowrap;
        justify-content:space-evenly;
        margin:0 auto;
        margin-top: 20px;
        // padding: 5px;
        .leftbox,.rightbox{
            a {
                text-decoration: none; 
                span {
                font-size:xx-small;
                vertical-align: middle;
            }
            .icon {
                width:10px;
                height:20px;
                vertical-align: middle;
                // margin-top: 4px;
            }
            }
           
        }
    }

    .page1 {
        width: 65%;
        margin: 0 auto;
        margin-top: 40px;
        background-color: whitesmoke;
        border-radius: 20px;

        // border-radius: 30px;
        // background-color: yellowgreen;
        .head {
            display: flex;
            width: 90%;
            margin: 0 auto;
            padding: 20px;
            // background-color: steelblue;
            position: relative;

            .tximg {
                width: 60px;
                height: 100%;
                border-radius: 50%;

                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }

            .publicinfm {
                margin-left: 20px;
                font-size: xx-small;

                .time {
                    // margin-top: 20px;
                    font-size: 5px;
                }
            }

            .follow {
                position: absolute;
                right: 110px;
                top: 25px;
                border-radius: 15%;
                border: none;
                outline: none;

                .gzbtn {
                    width: 70px;
                    height: 35px;
                    background-color: v-bind(btncolor);
                    border-radius: 30px;
                    border: 1px rgba(255, 115, 0, 0.724) solid;
                    outline: none;
                    color: rgba(255, 115, 0, 0.724);
                    font-size: xx-small;
                    font-weight: 600;
                }

                .gzbtn:hover {
                    cursor: pointer;
                    background-color: v-bind(btnhcolor);
                }
            }
        }

        .henxian {
            width: 80%;
            margin: 0 auto;
            margin-top:20px;
        }

        .body {
            width: 91%;
            margin: 0 auto;
            padding: 10px;
            padding-left: 120px;

            .fabutext {
                width: 103%;

                // a{
                //   text-decoration: none;
                // }
                p {
                    width: 60%;
                    height: 20px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-family: "宋体";
                    white-space: nowrap;
                    // text-indent: 2em;
                    // line-height: 1.5em;
                    text-align: left;
                    // font-size: 25px;
                }
            }

            .fabuimg {
                width: 100%;
                margin-top: 5px;

                .publicimg {
                    width: 100%;
                    // background-color: crimson;
                    display: flex;
                    margin: 0 auto;
                    margin-top: 20px;
                    flex-wrap: wrap;
                    justify-content: flex-start;

                    img {
                        width: 150px;
                        height: 150px;
                        margin-right: 15px;
                        border-radius: 10px;
                    }
                }
            }
        }

        .foot {
            width: 90%;
            // background-color: cornflowerblue;
            // margin: 0 auto;
            margin-top: 5px;
            // display: flex;
            justify-content: space-around;

            .dianzan,
            .pinglun,
            .shoucang {
                // background-color: darkblue;
                display: inline-block;
                padding: 5px;
                margin-right: 70px;

                span {
                    vertical-align: middle;
                    font-size: 18px;
                }

                .icon {
                    vertical-align: middle;
                }
            }
        }
    }


    .page1 {
        width: 65%;
        margin: 0 auto;
        margin-top: 40px;
        background-color: whitesmoke;
        border-radius: 20px;

        // border-radius: 30px;
        // background-color: yellowgreen;
        .head {
            display: flex;
            width: 90%;
            margin: 0 auto;
            padding: 20px;
            padding-top: 2px;
            // background-color: steelblue;
            position: relative;

            .tximg {
                width: 16px;
                height: 100%;
                border-radius: 50%;

                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }

            .publicinfm {
                margin-left: 20px;
                font-size: xx-small;

                .time {
                    // margin-top: 5px;
                    font-size: xx-small;
                }
            }

            .follow {
                position: absolute;
                right: 77px;
                top: 51px;
                border-radius: 15%;
                border: none;
                outline: none;

                .gzbtn {
                    width: 55px;
                    height: 17px;
                    background-color: v-bind(btncolor);
                    border-radius: 30px;
                    border: 1px rgba(255, 115, 0, 0.724) solid;
                    outline: none;
                    color: rgba(255, 115, 0, 0.724);
                    font-size: 12px;
                    font-weight: 600;
                }

                .gzbtn:hover {
                    cursor: pointer;
                    background-color: v-bind(btnhcolor);
                }
            }
        }

        .henxian {
            width: 80%;
            margin: 0 auto;
        }

        .body {
            width: 91%;
            margin: 0 auto;
            padding: 10px;
            padding-left: 18px;

            .fabutext {
                width: 103%;

                // a{
                //   text-decoration: none;
                // }
                p {
                    width: 60%;
                    height: 20px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-family: "宋体";
                    white-space: nowrap;
                    // text-indent: 2em;
                    // line-height: 1.5em;
                    text-align: left;
                    font-size: 5px;
                }
            }

            .fabuimg {
                width: 100%;
                margin-top: 5px;

                .publicimg {
                    width: 100%;
                    // background-color: crimson;
                    display: flex;
                    margin: 0 auto;
                    margin-top: 5px;
                    flex-wrap: wrap;
                    justify-content: flex-start;

                    img {
                        width: 20px;
                        height: 20px;
                        margin-right: 15px;
                        border-radius: 1px;
                    }
                }
            }
        }

        .foot {
            width: 90%;
            // background-color: cornflowerblue;
            // margin: 0 auto;
            // margin-top: 30px;
            // display: flex;
            justify-content: space-around;

            .dianzan,
            .pinglun,
            .shoucang {
                // background-color: darkblue;
                display: inline-block;
                padding: 5px;
                margin-right: 60px;

                span {
                    vertical-align: middle;
                    font-size: 12px;
                }

                .icon {
                    vertical-align: middle;
                    width: 10px;
                    height: 10px;
                }
            }
        }
    }

    .bottom {
        width: 30%;
        // background-color: tomato;
        margin: 0 auto;
        margin-top: 15px;
        display: flex;
        justify-content: center;
        padding-top: 5px;

        a {
            text-decoration: none;
            font-size: 10px;
        }
    }
}
</style>